<template>
	<div class="zh-table zh-statistics">
        <div class="zh-table-open clear">
            <div class="zh-open-left fl">
                <div class="open-width" style="width: 100px">
                    <el-select v-model="role_id" filterable placeholder="请选择">
                        <el-option
                            v-for="item in roleData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="open-width" style="width: 270px">
                    <el-input v-model="keyword" placeholder="请输入用户名、资源类型、资源名称搜索" @keyup.enter.native="searchFunc"></el-input>
                </div>
                <el-button type="primary" @click="searchFunc">搜索</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
            </div>
            <div class="zh-open-right fr">
                <el-button type="primary" @click="exportList">导出Excel表</el-button>
            </div>
        </div>
        <div class="zh-table-contents">
            <el-table
                :data="listData"
                border
                max-height="600"
                style="width: 100%">
                <el-table-column
                    type="index"
                    :index="typeIndex"
                    label="序号"
                    align="center"
                    show-overflow-tooltip
                    width="50"
                    >
                </el-table-column>
                <el-table-column
                    prop="studyname"
                    label="学习用户"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="rolename"
                    label="用户角色"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop=""
                    label="资源名称"
                    align="center"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                    <span  @click="viewResource(scope.row)" class="viewResource"> {{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="string"
                    label="资源分类"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="file_type_txt"
                    label="资源类型"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="上传人"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="资源状态"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="study_time"
                    label="学习时间"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
            </el-table>
            <div class="table-pagination" v-show="total_number > 10">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listParam.page_index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="listParam.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total_number">
                </el-pagination>
                <div class="pagination-button">
                    <el-button 
                        @click="getList"
                        type="primary" icon="el-icon-refresh" 
                        circle title="刷新数据" size="mini" >
                    </el-button>
                </div>
            </div>
        </div>
		
        <transition name="el-fade-in-linear">
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox"
					v-loading="viewLoading.status"
    				:element-loading-text="viewLoading.txt"
				>
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
						</nativeVideo>

					</div>
				</div>
			</div>
		</transition>

		<transition name="el-fade-in-linear" lock-scroll="false" >
			<div class="masking" :class="{ activeLive: isPDFActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>文档预览</span>
						<i class="el-icon-close" @click="viewPDFClose"></i>
					</div>
					<div class="masking-document">
                        <div class="pdf-View">
                            <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                        </div>
					</div>
				</div>
			</div>
		</transition>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>

		<el-dialog
			title="音频预览"
			:visible.sync="voiceVisible"
			width="auto"
			style="min-width:550px;"
			top="0"
			custom-class="imgVisible"
			:close-on-click-modal="false"
			:before-close="closeAudio">
			<div class="imgViewx">
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl"  controlsList="nodownload" autoplay>
				Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import nativeVideo from '../../public/nativeVideo';
	
  	export default {
	    data() {
		    return {
                imagePreview: {
                    showViewer: false,
                    previewSrcList: []
                },
		    	activePanel: 'statistics',
		    	roleData:[{id:0,name:'全部'}],
		    	listData:[],
		    	listParam:{
		    		keyword:'',
		    		role_id:0,
		    		userid:0,
		    		page_index:1,
		    		page_size:10,
				},
				keyword:'',
		    	role_id:0,
		   		total_number:0,
		   		
			    isActive: true,
			    isPDFActive: true,
			    viwPdfParam:{
			    	src:'',
		            loadedRatio: 0,
		            page: 1,
		            numPages: 0,
		            rotate: 0,
				},
				imgVisible: false,
				imgViewUrl:'',
				voiceVisible:false,
				voiceViewUrl:'',
				viewLoading:{
					status:false,
					txt:'加载数据...'
				},
				showVideoPlayer:false,
                playParam:{play_url:'',},
		    }
		},
		created(){
	    	this.getRoleData();
            this.getList();
        },
        computed: {
            imageIndex() {
                return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
            }
        },
		methods: {
            /**
             * 关闭音频播放
             */
            closeAudio() {
                this.voiceVisible = false;
                document.getElementById("voicepoauy").pause();
            },
			searchFunc(){
				this.listParam.keyword = this.keyword;
				this.listParam.role_id = this.role_id;
				this.listParam.page_index = 1;                                                                                                                                          
				this.getList();
			},
			reset() {
				this.keyword = ''
				this.role_id = 0
				this.listParam = {
					keyword:'',
		    		role_id:0,
		    		userid:0,
		    		page_index:1,
		    		page_size:10,
				}
				this.getList();
			},
			pdfPageChange(val){
				this.viwPdfParam.page  = val;
			},
			error: function(err) {
				//this.$message.error('读取文件失败');
	        },

			//资源预览转发
			viewResource( obj ){
				this.viewLoading.status = true;
				
				//视频预览
				if( parseInt(obj.file_type) === 6 ){
					this.isActive = false
				}
				//图片预览
				else if( parseInt(obj.file_type) === 3 ) {
					this.imgVisible  = true;
				}
				//文档预览
				else if( parseInt(obj.file_type) === 1 ){
					this.isPDFActive = false
				}
				//音频预览
				else if( parseInt( obj.file_type ) === 5 ){
					this.voiceVisible = true;
				}else{
					this.$message.warning("不支持预览的资源类型")
					return false;
				}

				let success = ( data => {
					var result  = data.data;
					//视频预览
					if( parseInt(result.file_type) === 6 ){
						this.videoView(result.path);
					}
					//图片预览
					else if( parseInt(result.file_type) === 3 ) {
						this.imgView(result.path);
					}
					//文档预览
					else if( parseInt(result.file_type) === 1 ){
						this.pdfView( result.path);
					}
					//音频预览
					else if( parseInt( result.file_type ) === 5 ){
						this.voiceView(result.path)
						//this.$message.warning("不支持预览的资源类型")
					}else{
						this.$message.warning("不支持预览的资源类型")
					}
				})
				let fail = (data => {
					this.viewLoading.status = false;
					this.$message.error(data.msg)
				})

				this.$ajax.get('api/resource/view_info',{params: {id:obj.id,is_video:obj.is_video},func:{success:success,fail:fail}})

			},
			voiceView(url){
	        	this.voiceViewUrl = url;
	        	document.getElementById("voicepoauy").load();	
	        },
			/**
             * 查看图片
             * @param {Object} obj 记录信息
             */
            imgView(url) {
                this.imgViewUrl = url;
                this.imagePreview.showViewer = true;
                this.imagePreview.previewSrcList = [url];
            },
            closeViewer() {
                this.imagePreview.showViewer = false;
            },
			//pdf预览
			pdfView(url){
				
				this.viwPdfParam.src =  (url)
				this.viwPdfParam.src =  pdf.createLoadingTask(url)
			},
			viewPDFClose(){
				this.isPDFActive = true
			},
			//关闭视频预览
			viewClose(){
				this.showVideoPlayer = false;
				this.isActive = true
		
			},
			//视频预览
			videoView(url){
				this.showVideoPlayer = true;
				this.playParam.play_url = url;
			},
			getList(){
            	let success = (data=>{
            		this.listData = data.data.data;
                    this.total_number = data.data.data_sum;
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/user/manage_study_list',{params: this.listParam,func:{success:success}})
            },
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
			// getRoleData(){
			// 	let success = ( data => {
			// 		this.roleData = [];
			// 		this.roleData = deep_clone(data.data);
            //         this.roleData.unshift({id:0, name:'全部身份'});
			// 	});
			// 	let fail = (data => {
			// 		this.$message.error(data.msg)
            //     })
            //     let params = {
            //         type: 1,
            //     }
                
  			// 	this.$ajax.get('api/user/user_allow_control', {params: params, func:{success: success, fail: fail}})	    	
            // },
            getRoleData(){
		    	// 重写成功回调
				let success = ( data => {
                    this.roleData = [];
					this.roleData = deep_clone(data.data);
					this.roleData.unshift({id: 0, name: '全部身份'})
				});
  				this.$ajax.get('api/role/get_all', {params:{}, func: {success: success}});	
		    },
		    handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		    exportList(){         
                if( this.listData.length === 0 ){
					this.$message.warning("暂无数据！")
					return false;
                }

                this.export_excel('api/user/manage_study_list_excel', this.listParam, '学习统计');
                
                // this.$ajax.post('api/user/manage_study_list_excel', this.listParam, {responseType: 'blob' })
  				// .then(res => {
  				// 	if(!res) return;
				// 	let filename = res.headers['content-disposition']?res.headers("Content-Disposition").split(";")[1].split("filename=")[1]:'学习统计.xls',
				// 	blob = res.data;
				//     if (typeof window.navigator.msSaveBlob !== 'undefined') {
				//         window.navigator.msSaveBlob(blob, filename);
				//     }
				//     else {
				//         var blobURL = window.URL.createObjectURL(blob);
				//         var tempLink = document.createElement('a');
				//         tempLink.style.display = 'none';
				//         tempLink.href = blobURL;
				//         tempLink.setAttribute('download', filename); 
				//         if (typeof tempLink.download === 'undefined') {
				//             tempLink.setAttribute('target', '_blank');
				//         }
				        
				//         document.body.appendChild(tempLink);
				//         tempLink.click();
				//         document.body.removeChild(tempLink);
				//         window.URL.revokeObjectURL(blobURL);
				//     }
  				// })
	    	},
		},
		components: {
		    // pdf,
		    nativeVideo
		}
  	}
</script>
<style lang="scss">
.zh-statistics {
	.viewResource {
		cursor: pointer;
		&:hover {
			color: #409eff;
		}
	}
	.masking{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .5s;
		background: rgba(0,0,0,.3);
		z-index: 4;
		.maskingBox{
			position: absolute;
			top: 15%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}
		.masking_h{
			padding: 10px 15px;
			background: #348EFC;
			text-align: center;
			text-align-last: justify;
			>span,
			>i{
				font-size: 16px;
				text-align-last: initial;
				display: inline-block;
				vertical-align: middle;
				color: #fff;
			}
			>i{
				cursor: pointer;
			}
		}

	}

	.masking_c{
		.el-pagination{
			padding-bottom: 20px;
		}
	}

	.activeLive{
		opacity: 0;
		visibility: hidden;
	}

	.imgVisible{
		display: inline-block;
		vertical-align: middle;
		background: none;
		text-align: left;
		min-width: 550px;
		min-height: 550px;
		background: rgba(109, 116, 125, 0.78);
		margin: 0;
		.el-dialog__header{
			// display: none;
		}
		.el-dialog__body{
			text-align: center;
			padding: 0;
			img{
				max-width: 100%;
			}
		}
	}
	.el-dialog__wrapper{
		text-align: center;
	}
}
</style>